<template>
    <a-modal :width="1000" :title="title" :visible="innerVisible" @cancel="handleCancel"
        cancelText="关闭" :okButtonProps="{style:{display:'none'}}">
        <a-alert type="info" showIcon style="margin-bottom: 16px;">
            <template slot="message">
                <span>已选择</span>
                <a style="font-weight: 600;padding: 0 4px;">{{ selectedRowKeys.length }}</a>
                <span>项</span>
                <template v-if="selectedRowKeys.length>0">
                    <a-divider type="vertical" />
                    <a @click="handleClearSelection">清空选择</a>
                    <a-divider type="vertical" />
                    <a @click="handleRevertBatch">批量还原</a>
                    <a-divider type="vertical" />
                    <a @click="handleDeleteBatch">批量删除</a>
                </template>
            </template>
        </a-alert>

        <a-table ref="table" rowKey="id" size="middle" bordered :columns="columns"
            :loading="loading" :dataSource="dataSource" :pagination="false"
            :rowSelection="{selectedRowKeys, onChange: handleTableSelectChange}">

            <!-- 显示头像 -->
            <template slot="avatarslot" slot-scope="text, record, index">
                <div class="anty-img-wrap">
                    <a-avatar shape="square" :src="url.getAvatar(record.avatar)" icon="user" />
                </div>
            </template>

            <span slot="action" slot-scope="text, record">
                <a @click="handleRevert([record.id])"><a-icon type="redo" /> 还原用户</a>
                <a-divider type="vertical" />
                <a @click="handleDelete([record.id])"><a-icon type="delete" /> 彻底删除</a>
            </span>
        </a-table>

    </a-modal>
</template>

<script>
import { putAction, deleteAction, getFileAccessHttpUrl } from "@/api/manage"

// 高度封装的请求，请务必使用 superRequest.call(this,{}) 的方式调用
function superRequest(options) {
    this.loading = !!options.loading
    options.promise.then(res => {
        if (res.success && typeof options.success === 'function') {
            options.success(res)
        } else {
            throw new Error(res.message)
        }
    }).catch(e => {
        console.error('查询已删除的用户失败：', e)
        this.$message.warning('查询已删除的用户失败：' + (e.message || e))
    }).finally(() => {
        this.loading = false
    })
}

export default {
    name: 'UserRecycleBinModal',
    props: {
        visible: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            title: '用户回收站',
            loading: false,
            innerVisible: false,
            selectedRowKeys: [],
            dataSource: [],
            columns: [
                { title: '序号', align: 'center', key: 'rowIndex', width: 80, customRender: (t, r, i) => i + 1 },
                { title: '账号', align: 'center', dataIndex: 'username' },
                { title: '姓名', align: 'center', dataIndex: 'realname', },
                { title: '头像', align: 'center', dataIndex: 'avatar', scopedSlots: { customRender: 'avatarslot' } },
                { title: '部门', align: 'center', dataIndex: 'orgCode' },
                { title: '操作', align: 'center', dataIndex: 'action', width: 200, scopedSlots: { customRender: 'action' } }
            ],
            url: {
                getAvatar: (path) => getFileAccessHttpUrl(`${path}`),
                // 回收站操作，get = 获取列表；put = 取回；delete = 彻底删除
                recycleBin: '/sys/user/recycleBin',
                putRecycleBin: '/sys/user/putRecycleBin',
                deleteRecycleBin: '/sys/user/deleteRecycleBin',
            },
        }
    },
    watch: {
        visible: {
            immediate: true,
            handler(val) {
                if (val) {
                    this.loadData()
                }
                this.innerVisible = val
            }
        },
        innerVisible(val) {
            this.$emit('update:visible', val)
        },
    },
    methods: {
        loadData() {
            superRequest.call(this, {
                loading: true,
                promise: this.$http.get(this.url.recycleBin),
                success: res => this.dataSource = res.result
            })
        },
        handleOk() {
            this.loadData()
            this.$emit('ok')
        },
        handleCancel() {
            this.innerVisible = false
        },
        // 还原用户
        handleRevert(userIds) {
            this.$confirm({
                title: '恢复用户',
                content: `您确定要恢复这 ${userIds.length} 个用户吗？`,
                centered: true,
                onOk: () => {
                    putAction(this.url.putRecycleBin, { userIds: userIds.join(',') }).then((res) => {
                        if (res.success) {
                            this.handleOk()
                            this.handleClearSelection()
                            this.$message.success(`还原 ${userIds.length} 个用户成功！`)
                        }
                    })
                }
            })
        },
        // 彻底删除用户
        handleDelete(userIds) {
            this.$confirm({
                title: '彻底删除用户',
                content: (<div>
                    <p>您确定要彻底删除这 {userIds.length} 个用户吗？</p>
                    <p style="color:red;">注意：彻底删除后将无法恢复，请谨慎操作！</p>
                </div>),
                centered: true,
                onOk: () => {
                    var that = this;
                    deleteAction(that.url.deleteRecycleBin, { userIds: userIds.join(',') }).then((res) => {
                        if (res.success) {
                            this.loadData()
                            this.handleClearSelection()
                            this.$message.success(`彻底删除 ${userIds.length} 个用户成功！`)
                        } else {
                            that.$message.warning(res.message);
                        }
                    });
                },
            })
        },
        handleRevertBatch() {
            this.handleRevert(this.selectedRowKeys)
        },
        handleDeleteBatch() {
            this.handleDelete(this.selectedRowKeys)
        },
        handleClearSelection() {
            this.handleTableSelectChange([], [])
        },
        handleTableSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys
            this.selectionRows = selectionRows
        },
    }
}
</script>

<style lang="less" scoped></style>